<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            width: 500px;
            height: 800px;
            background-color: pink;
        }
        /* 如果元素都浮动，则盒子会顶对齐 */
        /* 上一个元素不浮动，下一个元素浮动则上一个元素的底部会和下一个元素的顶部对齐 */
        /* 一个父盒子的所有子元素都浮动才能在一行 */
        section div:first-child {
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        section div:last-child{
            width: 249px;
            height: 300px;
            background-color: green;
            float: left;
        }
    </style>
</head>

<body>
    <section>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

</html>